<html>
<head>
    <script src="/d3.min.js" charset="utf-8"></script>
    <script src="/cola.v3.min.js"></script>
    <script src="/jquery.min.js"></script>
</head>

<style>

    .node {
        stroke: #fff;
        stroke-width: 1.5px;
    }

    .link {
        stroke: #999;
        stroke-opacity: .6;
    }

    #main {
        display: flex
    }

    .chart {
        flex: 4
    }

    .lengend {
        flex: 1
    }
</style>

<body>

<form id="add_intent_form" method="POST" onSubmit="return handleSubmit()">
    <input name="object">
    <input name="attribute">
    <input type="submit"/>
</form>

<div id="main">
    <div id="chart">

    </div>
    <div id="legend">
        <div class="selected">
            <h3>Selected</h3>
            <h4>extent</h4>

            <div class="extent"></div>
            <h4>intent</h4>

            <div class="intent"></div>
        </div>
    </div>
</div>

<script>
    function handleSubmit(event) {
        var form = $('#add_intent_form')
        new Promise(function (resolve, reject) {
            $.ajax({
                type: 'POST',
                url: 'http://localhost:5000/add_intent',
                contentType: 'application/json',
                data: JSON.stringify({
                    object: form.find('input[name=object]').val(),
                    attribute: form.find('input[name=attribute]').val()
                }),
                success: resolve,
                error: reject
            });
        })
                .then(fetch)
                .then(showLengend)
                .then(renderGraph);


        return false;
    }

    function showLengend(data) {
        return data;
    }


    $(window).on('clicked-node', function (e, d) {
        console.log('clicked', d.extent, d.intent);
        $('.selected .intent').text(d.intent);
        $('.selected .extent').text(d.extent);
    });

    var color = d3.scale.category20();

    function fetch() {
        return new Promise(function (resolve, reject) {
            $.ajax({
                type: 'get',
                url: 'http://localhost:5000',
                success: resolve,
                error: reject
            });
        });
    }


    var height = 300;
    var width = 300;

    var svg = d3.select("#chart").append("svg")
            .attr("width", width)
            .attr("height", height);


    var constraints = [
        {"axis": "y", "left": 0, "right": 1, "gap": 25}
    ];

    function renderGraph(data) {

        console.log(data);
        var d3cola = cola.d3adaptor()
                .size([width, height]);

        d3cola
                .avoidOverlaps(true)
                .convergenceThreshold(1e-3)
                .flowLayout('y', 60)
                .nodes(data.nodes)
                .links(data.links)
                .jaccardLinkLengths(60)
                .start(10, 15, 20);


//        d3cola
//                .nodes(data.nodes)
//                .links(data.links)
//                .jaccardLinkLengths(150)
//                .constraints(constraints)
//                .avoidOverlaps(true)


        var link = svg.selectAll(".link")
                .data(data.links)

        link.enter().append("line")
                .attr("class", "link")
                .style("stroke-width", 2);

        link.attr("x1", function (d) {
            return d.source.x;
        })
                .attr("y1", function (d) {
                    return d.source.y;
                })
                .attr("x2", function (d) {
                    return d.target.x;
                })
                .attr("y2", function (d) {
                    return d.target.y;
                });

        link.exit().remove()

        var node = svg.selectAll(".node")
                .data(data.nodes);

        node
                .enter().append("circle")
                .attr("class", "node")
                .attr("r", function (d) {
                    return 5 + 3 * d.extent.length;
                })
                .on('click', function (d) {
                    $(window).trigger('clicked-node', d);
                })
                .style("fill", function (d) {
                    return color(d.id);
                });

        node
                .attr("cx", function (d) {
                    return d.x;
                })
                .attr("cy", function (d) {
                    return d.y;
                })
                .attr("r", function (d) {
                    return 5 + 3 * d.extent.length;
                });


        node.exit().remove()
    }
    fetch().then(showLengend).then(renderGraph);


</script>
</body>
</html>

